<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>ChatGPT demo</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
    <style type="text/css">
        html, body, .container {
            height: 100%;
        }

        .header {
            background: #ededed;
        }

        .header_main {
            height: 50px;
            line-height: 50px;
            font-size: 30px;
        }

        .header_info {
            background: #ededed;
            font-size: 10px;
            text-align: right;
            margin-top: 30px;
        }

        .chat_box_row {
            height: calc(100% - 50px - 82px);
            overflow-y: auto;
        }

        .chat_box {
            background: #e5ddd5;
            padding-top: 10px;
            padding-bottom: 10px;
        }

        .chat_input {
            background: #ededed;
            padding-top: 10px;
            padding-bottom: 10px;
        }

        .message {
            border-radius: 10px;
            padding: 5px 10px 5px 10px;
            margin-top: 10px;
            max-width: 75%;
        }

        .message_me {
            float: right;
            background: #86ef64;
        }

        .message_chatGPT {
            float: left;
            background: white;
        }

        .submit_button {
            width: 80px;
        }
    </style>
</head>
<body>
<div class="container">
    <div class="row header">
        <div class="col header_main">
            ChatGPT
        </div>
        <div class="col header_info">
            调用ChaGPT API，<a href="https://gitee.com/wb04307201/chat-gpt-demo" target="_blank">喜欢请给个stars</a>
        </div>
    </div>
    <div class="row chat_box_row" id="chat_box_row">
        <div class="col chat_box" id="chat_box">
        </div>
    </div>
    <div class="row">
        <div class="col chat_input">
            <div class="input-group">
                <span class="input-group-text">说：</span>
                <textarea class="form-control" aria-label="With textarea" name="prompt" id="prompt"></textarea>
                <button class="btn btn-outline-secondary submit_button" type="button" id="submit" onclick="chatGPT()">
                    发送
                </button>
            </div>
        </div>
    </div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<script src=" https://cdn.jsdelivr.net/npm/marked@4.2.12/lib/marked.umd.min.js "></script>
<script type="text/javascript">
    var chat_box = document.getElementById("chat_box")
    var prompt = document.getElementById("prompt")
    prompt.select()
    var submit = document.getElementById("submit")
    var chat_box_row = document.getElementById("chat_box_row")

    document.onkeydown = function (event_e) {
        if (window.event) {
            event_e = window.event;
        }
        var int_keycode = event_e.charCode || event_e.keyCode;
        if (int_keycode == '13') { //回车键：13
            chatGPT();//调用自己的函数
        }
    }

    function chatGPT() {
        if (prompt.value != "" && prompt.value != null && prompt.value.replace(/[\r\n]/g, "") != "") {
            prompt.readOnly = true
            prompt.style.backgroundColor = "#aaa"
            submit.disabled = true
            submit.innerHTML = "<span class=\"spinner-grow spinner-grow-sm\" role=\"status\" aria-hidden=\"true\"></span><span class=\"visually-hidden\">Loading...</span>"

            axios({
                method: 'post',
                // url: 'https://api.openai.com/v1/completions',
                url: 'https://api.openai.com/v1/chat/completions',
                headers: {
                    'Content-Type': 'application/json',
                    'Authorization': 'Bearer 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',
                },
                data: {
                    // model: 'text-davinci-003',
                    // prompt: prompt.value,
                    // max_tokens: 4096,
                    // temperature: 0,
                    model: "gpt-3.5-turbo",
                    messages: [{"role": "user", "content": prompt.value}]
                }
            }).then(response => {
                chat_box.innerHTML = chat_box.innerHTML + "<div class=\"row\">\n" +
                    "<div class=\"col\">\n" +
                    "<div class=\"message message_me\">\n" +
                    prompt.value + "\n" +
                    "</div>\n" +
                    "</div>\n" +
                    "</div>" + " <div class=\"row\">\n" +
                    "<div class=\"col\">\n" +
                    "<div class=\"message message_chatGPT\">\n" +
                    marked.parse(response.data.choices[0].text) + "\n" +
                    "</div>\n" +
                    "</div>\n" +
                    "</div>"

                prompt.readOnly = false
                prompt.style.backgroundColor = "white"
                prompt.value = ""
                prompt.select()
                submit.disabled = false
                submit.innerHTML = "发送"
                chat_box_row.scrollTop = chat_box_row.scrollHeight
            }).catch(error => {
                chat_box.innerHTML = chat_box.innerHTML + "<div class=\"row\">\n" +
                    "<div class=\"col\">\n" +
                    "<div class=\"message message_me\">\n" +
                    prompt.value + "\n" +
                    "</div>\n" +
                    "</div>\n" +
                    "</div>" + " <div class=\"row\">\n" +
                    "<div class=\"col\">\n" +
                    "<div class=\"message message_chatGPT\">\n" +
                    error + "\n" +
                    "</div>\n" +
                    "</div>\n" +
                    "</div>"

                prompt.readOnly = false
                prompt.style.backgroundColor = "white"
                prompt.select()
                submit.disabled = false
                submit.innerHTML = "发送"
                chat_box_row.scrollTop = chat_box_row.scrollHeight
            });
        }
        //无输入
        else {
            chat_box.innerHTML = chat_box.innerHTML + " <div class=\"row\">\n" +
                "<div class=\"col\">\n" +
                "<div class=\"message message_chatGPT\">\n" +
                "你想和我说什么？\n" +
                "</div>\n" +
                "</div>\n" +
                "</div>"
            prompt.value = ""
            prompt.select()
            chat_box_row.scrollTop = chat_box_row.scrollHeight
        }
    }
</script>
</body>
</html>